<template>
	<view>
		<view class="logo">
			<u-image :src="zpImgUrl+'logo.png'" width="176" height="176" border-radius="40"></u-image>
		</view>
		<view class="logo-name">中盈甄品</view>
		<view class="referee" v-if="isShowPhone">推荐人：{{mobilePhone}}</view>
		<view class="form">
			<view class="item" style="padding-right: 30rpx;">
				<u-input maxlength="11" :focus="phoneFocus" v-model="phone" type="number"
					placeholder="请输入手机号"></u-input>
				
			</view>
			<view class="item">
				<u-input :focus="passwordFocus" v-model="password" type="password" placeholder="请输入密码"></u-input>
			</view>
			<view class="item">
				<u-input type="text" v-model="smsCode" placeholder="请输入验证码"></u-input>
				<text class="code" @click="getCode">{{time == 60 ? '点击获取' : time+'s后重新获取'}}</text>
			</view>
			
		</view>

		<button class="submit" @tap="submit">
			立即注册
		</button>

		<view :class="screenWidth < 375 ? 'big btn-box' : 'btn-box'">
			<view>
				<checkbox-group @change="checkboxChange">
					<checkbox value="1" style="transform:scale(0.7)" />勾选即为同意
				</checkbox-group>
				
			</view>
			
			<text class="act-color" @click="toPage('1')">《隐私政策》</text>
			<text class="act-color" @click="toPage('2')">《注册协议》</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		appletImgUrl,zpImgUrl
	} from "@/common/config.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				appletImgUrl: appletImgUrl,
				zpImgUrl:zpImgUrl,
				phone: '',
				phoneFocus: false,
				passwordFocus: false,
				smsCode: '',
				time: 60,
				password: "",
				checked: [],
				screenWidth: 375,
				userName:"",
				isShowPhone:false,
				mobilePhone:"",
				promoterUserId:"",
				scene:"",
				options:""
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(options) {
			console.log(options);
			this.options=JSON.stringify(options);
			let that=this;
			if(options.scene){
				this.scene = options.scene;
				if(this.scene=="productDetailShare"){
					this.isShowPhone=true;
					if(uni.getStorageSync('refereeId')){
						that.promoterUserId=uni.getStorageSync('refereeId');
					}
					if(uni.getStorageSync('mobilePhone')){
						that.mobilePhone=uni.getStorageSync('mobilePhone');
					}
				}
			}
			
			if(options.q){
				this.isShowPhone=true;
				let qrUrl=decodeURIComponent(options.q);
				const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
				const params = {};
				let match;
				  while (match = paramsRegex.exec(qrUrl)) {
				    params[match[1]] = match[2];
				  }
				  let promoterId=params.promoter;
				  this.$u.get('user/promoter/'+promoterId).then(res => {
				  	console.log(res)
					that.mobilePhone=res.userName;
					that.promoterUserId=res.id
				  })
			}
			
		},
		methods: {
			...mapMutations(['login']),
			toUser(provider) {

			},
			async getCode() {
				if (this.time < 60) {
					this.$refs.uToast.show({
						title: '请在' + this.time + 's后获取',
						type: 'warning'
					})
					return
				}
				if (this.phone == '') {
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'warning'
					})
					this.phoneFocus = true
					return
				}
				await this.$u.get('sms/send/register/' + this.phone)
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						this.time = 60
						clearInterval(this.timer)
					}
				}, 1000)
				this.$refs.uToast.show({
					title: '发送成功',
					type: 'success'
				})
			},
			getPhoneNumber(e) {
				if (!e.detail.iv || !e.detail.encryptedData) {
					this.$refs.uToast.show({
						title: '您可能需要先绑定手机号才能执行该操作',
						type: 'error'
					})
					return
				}
				const self = this
				wx.login({
					success: res => {
						this.$u.post('user/getPhoneNumber', {
							code: res.code,
							encrypdata: e.detail.encryptedData,
							ivdata: e.detail.iv,
							xcxName: 'WG_MALL'
						}).then(res => {
							self.phone = res.purePhoneNumber
						})
					}
				})
			},
			submit(e) {
				console.log(e)
                   let that=this;
				if (this.phone == '') {
					this.phoneFocus = true
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'warning'
					})
					return
				}
				if (this.password == '') {
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'warning'
					})
					return
				}
				if (this.smsCode == '') {
					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'warning'
					})
					return
				}
				if(this.checked.length==0){
					this.$refs.uToast.show({
						title: '请同意相关协议',
						type: 'warning'
					})
					return
				}
				this.$u.post('user/register', {
					userName: this.phone,
					password: this.password,
					openId: uni.getStorageSync('openId'),
					smsCode: this.smsCode,
					promoterUserId:this.promoterUserId
				}).then(res => {
					if(that.scene=="productDetailShare"){
						that.$u.post('user/login', {
							userName: that.phone,
							password:that.password
						}).then(res => {
							that.$refs.uToast.show({
								title: '注册成功',
								type: 'success',
								duration:1500
							})
							uni.removeStorageSync('proUserId')
							uni.setStorageSync('userToken', res)
							getApp().globalData.bindState = true
							that.$u.get('user/info').then(userInfo => {
								//console.log("用户信息",userInfo)
								if (userInfo.headPhoto) {
									if (userInfo.headPhoto.indexOf("https") != 0) {
										userInfo.headPhoto = that.imageURL + userInfo.headPhoto
									}
								} else {
									userInfo.headPhoto = that.zpImgUrl+'logo.png'
								}
								
								uni.setStorageSync('userInfo', userInfo)
							})
							
							uni.navigateBack({
								delta: 2
							});
							
						})
					}else{
						that.$refs.uToast.show({
							title: '注册成功，将跳转登录页',
							type: 'success',
							duration:3000
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/user/login/login'
							});
						}, 1200)
					}
					
				})
			},
			myFun() {
				console.log(this.checked)
				if (this.checked && this.checked.length) {
					this.checked = [];
				} else {
					this.checked = ["1"];
				}
			},
			toPage(v) {
				if (v === "1") {
					wx.navigateTo({
						url: "/pages/user/login/privacy",
					});
				} else if (v === "2") {
					wx.navigateTo({
						url: "/pages/user/login/agreement",
					});
				}
			},
			checkboxChange(e) {
                 console.log(e);
				 this.checked=e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.submit {
		margin: 0 auto;
		width: 500rpx;
		margin-top: 190rpx;
		height: 70rpx;
		background: linear-gradient(to right, #FF3868, #FC6161);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
	}

	.form {
		width: 500rpx;
		margin: 0 auto;
		padding-top: 80rpx;

		.item {
			background-color: #EEEEEE;
			// padding: 0 30rpx;
			margin-top: 50rpx;
			border-radius: 40px;
			display: flex;
			align-items: center;
			padding-left: 30rpx;

			&.phone {
				background: linear-gradient(90deg, #FF3768, #FC6161);
				color: #FFFFFF;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				// line-height: 80rpx;
				height: 80rpx;

				text {
					margin-left: 15rpx;
				}

				justify-content: center;
			}

			u-input {
				flex: 1;
			}

			button {
				background: none;
				padding: 0 30rpx;
				height: auto;
				line-height: normal;

				// padding-left: 30rpx;
				&::after {
					border: none;
				}
			}

			.code {
				color: #F39A15;
				font-size: 28rpx;
				border-left: 1rpx solid #F39A15;
				padding: 0 30rpx;
				margin-left: 20rpx;

			}

			&.btn-item {
				margin-top: 30rpx;

				.btn {
					font-size: 28rpx;
				}

				display: flex;
				justify-content: space-between;
				align-items: center;
				background: none;
			}
		}
	}

	.logo {
		display: flex;
		justify-content: center;
		padding-top: 70rpx;
	}

	.logo-name {
		font-size: 36rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 40rpx;
		font-size: 28rpx;
	}
	.referee{
		text-align: center;
		font-size: 28rpx;
		color: #FE381B;
		margin-top: 40rpx;
	}
</style>